<template>
    <div>
        <header class="resviseTop">
            <span class="resvise_title">重置密码</span>
        </header>
        <div class="W_80">
            <div class="flex_login">
                <img src="../../img_myself/account.png" alt="">
                <input type="text" placeholder="请输入手机号码" v-model="task.user_mobile">
            </div>
            <div class="flex_login">
                <img src="../../img_myself/yanzheng.png" alt="" style="width: 6vw;margin: 0 4vw 0 1vw;">
                <input type="text" placeholder="请输入验证码" v-model="task.verification_code">
                <span @click="Codes()">{{ codeTime }}</span>
            </div>
            <div class="flex_login">
                <img src="../../img_myself/password.png" alt="">
                <input type="password" placeholder="请输入密码" v-model="task.user_password">
            </div>
            <div class="login_btn" @click="userLogin">登录</div>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "Login",
        data: () => ({
            task: {
                user_mobile: '',
                user_password: '',
                verification_code: '',
                verification_key: ''
            },
            codeTime: '获取验证码',
        }),
        methods: {
            userLogin() {
                var _that = this;
                delete _that.task.user_mobile ;

                api.request('/user/forget', 'post', _that.task).then((resp) => {
                    _that.$toast('修改成功,请关闭页面后重新绑定')

                    // setTimeout(function (){
                    //     _that.$router.push({
                    //         path: '/task/Login'
                    //     })
                    // },1000)
                })
            },
            Codes() {
                var _that = this;
                if(_that.codeTime == '获取验证码') {
                    api.request('/verificationCodes', 'post', {user_mobile: this.task.user_mobile,verification_code_type: 2}).then((resp) => {
                        _that.$toast('发送成功')
                        _that.codeTimefun();
                        _that.task.verification_key = resp.data.data.key;
                        // localStorage.setItem('token', resp.data.data.access_token)
                    })
                }else {
                    _that.$toast(_that.codeTime)
                }
            },
            codeTimefun() {
                var time = 60;
                var _that = this;
                var t = setInterval(function (){
                    time--
                    _that.codeTime = time+'秒后获取';
                    if (time == 0){
                        _that.codeTime = '获取验证码'
                        clearInterval(t)
                    }
                }, 1000)
            }
        }
    }
</script>

<style scoped="css">
    .logo_img {
        width: 100%;
        height: 6rem;
        display: flex;
    }

    .logo_img img {
        width: 2.5rem;
        margin: auto;
    }

    .W_80 {
        margin-top: .5rem;
        padding: 0 5vw;

    }

    ::-webkit-input-placeholder {
        color: #555;
    }

    .flex_login img{
        width: 8vw;
        margin-right: 3vw;
    }

    .flex_login {
        display: flex;
        align-items: center;
        border-bottom: 0.3vw solid #E6E6E6;
        position: relative;
        padding-bottom: 1vw;
        margin-bottom: 2vw;
    }

    /*.flex_login img {*/
        /*width: 5vw;*/
        /*position: absolute;*/
        /*right: 0;*/
    /*}*/

    .flex_login input {
        height: 10vw;
        font-size: 4.3vw;
        padding-left: 1vw;
        border: 0;
    }

    .flex_login:nth-of-type(2) {
        margin-top: 0.4rem;
    }

    .login_btn {
        width: 100%;
        background: #2EABFF;
        text-align: center;
        height: 1.3rem;
        line-height:1.3rem;
        -webkit-border-radius: 1.5vw;
        -moz-border-radius: 1.5vw;
        border-radius: 1.5vw;
        color: #fff;
        font-size: 4.2vw;
        margin-top: 0.8rem;
    }

    .bottom_infor {
        margin-top: 0.5rem;
        font-size: 3.8vw;
    }

    .bottom_infor a {
        color: #41A7E9;
    }

    .bottom_infor > div:last-of-type a {
        color: #DA7883;
    }

    .bottom_infor, .bottom_infor > div:first-of-type {
        display: flex;
        justify-content: space-between;
    }


</style>
